<div style="margin-top:15px;" v-if="status">
	<a-row :gutter="24">
		<a-col :span="15">
			<a-descriptions title="当前存档"></a-descriptions>
			<a-list v-if="curArchives.length != 0" item-layout="horizontal" :data-source="curArchives">
				<a-list-item slot="renderItem" slot-scope="item, index">
					<a slot="actions" @click="btnView(item.id,item.slotName)" >详情</a>
					<a-tooltip placement="top" slot="actions">
						<template slot="title">
							<span>【注意】这个读取操作会把当前播放的屏幕里面的数据替换掉</span>
						</template>
						<a @click="btnRead(item.id,item.slotName)" >读取</a>
					</a-tooltip>
					<a slot="actions" @click="btnSave(item.id,item.slotName)" >保存</a>
					<a-list-item-meta :description="'#'+item.id" >
						<span slot="title">{{ item.name }}</span>
						<a-avatar icon="snippets" slot="avatar"
								style="background-color:#3A3;vertical-align:middle;margin-top:6px;"></a-avatar>
					</a-list-item-meta>
				</a-list-item>
			</a-list>
			<a-collapse default-active-key="" :bordered="false" v-if="curArchives.length != 0">
				<template #expandIcon="props">
					<a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
				</template>
				<a-collapse-panel key="1" header="启动选项"
						style="background:#eee;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden;">
					<i>
						你可以通过在创建屏幕时，点击【创建链接】-【高级选项】里面的启动选项输入下面的代码，
						这样创建的屏幕启动时，会自动读取 {{currentSlot}} 存档数据
					</i><br/><br/>
					<a-card>
						<pre style="margin-bottom:0">save={{currentSlot}}</pre>
					</a-card>
				</a-collapse-panel>
			</a-collapse>
			<a-empty v-else description="没有保存任何存档"></a-empty>

			<a-collapse default-active-key="" :bordered="false">
				<template #expandIcon="props">
					<a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
				</template>
				<a-collapse-panel key="2" header="另存为"
						style="background:#eee;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden;">
					<a-input-search placeholder="另存为存档：" v-model.trim="saveAsSlot" @search="btnSaveAs">
						<a-button slot="enterButton">另存为</a-button>
					</a-input-search>
				</a-collapse-panel>
			</a-collapse>

			<a-descriptions title="全部存档"></a-descriptions>
			<a-list v-if="archives.length != 0" item-layout="horizontal" :data-source="archives">
				<a-list-item slot="renderItem" slot-scope="item, index">
					<a slot="actions" @click="btnView(item.id,item.slotName)" >详情</a>
					<a-tooltip placement="top" slot="actions">
						<template slot="title">
							<span>【注意】这个读取操作会把当前展示屏幕的数据替换掉</span>
						</template>
						<a @click="btnRead(item.id,item.slotName)" >读取</a>
					</a-tooltip>
					<a slot="actions" @click="btnSave(item.id,item.slotName)" >保存</a>
					<a-list-item-meta :description="'#'+item.id" >
						<span slot="title">
							{{ item.slotName }}&emsp;&emsp;
							<i style="opacity:0.5;">({{ item.name }})</i>
						</span>
						<a-avatar icon="snippets" slot="avatar"
								:style="{backgroundColor:item.slotName==currentSlot?'#3A3':'#33A'}"
								style="vertical-align:middle;margin-top:6px;"></a-avatar>
					</a-list-item-meta>
				</a-list-item>
			</a-list>
			<a-empty v-if="archives.length==0" description="还没有存档"></a-empty>
		</a-col>

		<a-col :span="8" :offset="1">
			<template v-if="viewCurrent">
				<a-page-header style="border: 1px solid rgb(235,237,240)" title="现在正在播放的……">
				</a-page-header>
				<a-card v-if="viewCurrent">
					<a-timeline style="padding-left:8px;">
						<a-timeline-item v-for="(id,index) in status.data.order" :key="id">
							<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
								{{pluginName(id)}}
							</div>
							<a-tag :color="pluginColor(id)">{{ tagName(id) }}</a-tag>
						</a-timeline-item>
					</a-timeline>
				</a-card>
			</template>

			<template v-else>
				<a-page-header style="border: 1px solid rgb(235,237,240)" @back="btnViewCurrent()"
					:title="'查看存档: ' + viewSaveName"></a-page-header>
				<a-card>
					<a-spin v-if="viewLoading"></a-spin>
					<a-timeline v-else style="padding-left:8px;">
						<a-timeline-item v-for="(plugin,index) in viewArchive.plugins" :key="'a'+index">
							<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
								{{pluginNameForSave(plugin)}}
							</div>
							<a-tag :color="pluginColorForSave(plugin)">{{ tagNameForSave(plugin) }}</a-tag>
						</a-timeline-item>
					</a-timeline>
				</a-card>
			</template>
		</a-col>
	</a-row>
</div>
